<template>
  <a-card :bordered="false">
    <div class="_header">
      <div class="item">
        <span class="k">订单编号</span>
        <span class="v">{{ orderInfo.orderCode }}</span>
      </div>
      <div class="item">
        <span class="k">结算项目</span>
        <span class="v">{{ orderInfo.orderType | getOrderTypeText }}</span>
      </div>
      <div class="item">
        <span class="k">订单状态</span>
        <DictTag class="v" :options="Dict.getLocal('orderStateDict')" :value="orderInfo.orderState" isText />
      </div>
      <div class="item">
        <span class="k">订单金额</span>
        <span class="v">￥{{ orderInfo.payMoney }}</span>
      </div>
    </div>
    <s-table
      size="default"
      ref="table"
      rowKey="dictId"
      listField="list"
      :showPagination="false"
      :columns="columns"
      :data="loadData"
    >
      <!-- 收益类型 -->
      <span slot="earningType" slot-scope="text">
        <DictTag :options="Dict.getLocal('orderEarningTypeDict')" :value="text" isText />
      </span>
      <!-- 分账状态 -->
      <span slot="settStatus" slot-scope="text">
        <DictTag :options="Dict.getLocal('orderSettStatusDict')" :value="text" />
      </span>
    </s-table>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { AccountList, orderTypeDict } from '@/api/order/order'
import DictTag from '@/components/DictTag'

export default {
  components: {
    STable,
    DictTag,
  },
  data() {
    return {
      // 表头
      columns: [
        {
          title: '结算参与方',
          dataIndex: 'orgName',
          width: 150,
        },
        {
          title: '收益类型',
          dataIndex: 'earningType',
          width: 120,
          scopedSlots: { customRender: 'earningType' },
        },
        {
          title: '佣金收入',
          dataIndex: 'income',
          width: 150,
        },
        {
          title: '分账状态',
          dataIndex: 'settStatus',
          width: 120,
          scopedSlots: { customRender: 'settStatus' },
        },
        {
          title: '分账时间',
          dataIndex: 'settledAt',
          width: 180,
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: () => {
        return AccountList(this.orderCode).then((res) => {
          this.orderInfo = res.data.order
          return res
        })
      },
      orderTypeDict,
      orderCode: undefined,
      orderInfo: {},
    }
  },
  filters: {
    getOrderTypeText(text) {
      return (orderTypeDict.find((v) => v.value === text) || {}).label
    },
  },
  computed: {},
  created() {
    this.orderCode = this.$route.query.orderCode
  },
  methods: {},
}
</script>

<style lang="less" scoped>
._header {
  display: flex;
  width: 80%;
  justify-content: space-around;
  padding-bottom: 20px;
  .item {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-weight: bold;
    font-size: 16px;
    position: relative;
    flex: 1;
    .v {
      margin-top: 10px;
    }
  }
  .item:not(:last-child) {
    border-right: 1px #eee solid;
  }
}
</style>